<template>
  <div id="container"></div>
</template>
<script type="text/javascript"></script>
 <script>
let center, map, geocoder, marker, markerClusterer;
import { orderLat } from "../../../../utils/api";
export default {
  name: "orderData",
  data() {
    return {
      position: {
        longitude: 116.454413, //经度
        latitude: 39.931295, //纬度
        city: "",
      },
      token: sessionStorage.getItem("token"),
      jingweiList: [],
    };
  },
  methods: {
    initMap() { 
      center = new TMap.LatLng(this.position.latitude, this.position.longitude);
      geocoder = new TMap.service.Geocoder();
      map = new TMap.Map(document.getElementById("container"), {
        center: center, //设置地图中心点坐标
        zoom: 11, //设置地图缩放级别
      });
      marker = new Array();
      for (var i = 0; i < this.jingweiList.length; i++) {
        if (this.jingweiList[i][0] < 90 && this.jingweiList[i][0] > -90) {
          console.log(new TMap.LatLng(
            this.jingweiList[i][0],
            this.jingweiList[i][1]
          ));
          var latLng = new TMap.LatLng(
            this.jingweiList[i][0],
            this.jingweiList[i][1]
          );
          marker.push({ position: latLng });
        }
      }
      console.log(123);
      markerClusterer = new TMap.MarkerCluster({
        map: map, //设置点聚合显示在哪个map对象中（创建map的段落省略）
        enableDefaultStyle: true, //使用默认样式
        minimumClusterSize: 2, //最小聚合点数：2个
        geometries: marker, //....将您所有要打到图中的坐标点传入进来
        zoomOnClick: true, //点击聚合数字放大展开
        gridSize: 120, //聚合算法的可聚合距离，即距离小于该值的点会聚合至一起，默认为60，以像素为单位
        averageCenter: false, //每个聚和簇的中心是否应该是聚类中所有标记的平均值
        maxZoom: 16, //采用聚合策略的最大缩放级别，若地图缩放级别大于该值，则不进行聚合，标点将全部被展开
      });
      console.log(markerClusterer);
      this.zoom();
      this.dragend();
    },
    zoom() {
      map.on("zoomend", (evt) => {
        console.log();
        if (map.getZoom().toFixed(1) <= 10) {
          // markerClusterer.set('minimumClusterSize', 1)
        }
        console.log(map.getCenter());
      });
    },
    dragend() {
      map.on("dragend", (evt) => {
        console.log(map.getCenter());
      });
    },
  },
  mounted() {
    orderLat(this.token).then((res) => {
      if (res.data.status) {
        this.jingweiList = res.data.data;
        this.jingweiList.forEach((item) => {
          item.reverse();
        });
        console.log(this.jingweiList);
        let timer = setTimeout(() => {
          clearTimeout(timer);
        }, 500);
      } else {
        this.$message.error(res.data.msg);
      }
      this.initMap();
    });
  },
};
</script>

<style scoped></style>
